<template>
	<div @touchmove.prevent class="blessing-content" v-if="downloadImg">
		<div v-if="show_guide" class="guide-mask" @click="hideGuide"></div>
		<img v-if="show_guide" class="guide-img" :src="guide_img" />
		<div class="blessing" id="download">
			<van-image width="100%" height="100%"  :src="downloadImg" fit="scale-down"></van-image>
			<div v-show="navActive == 1 && blessing_text"  class="blessing-text-box">
				<van-image 
					class="blessing-text" 
					width="100%"
					:src="blessing_text" 
					fit="scale-down">
				</van-image>
				<div v-show="username" class="username"> 
					<span>新的一年</span><span class="name">{{username}}</span><span>祝您</span>
				</div>
			</div>
			<div v-show="navActive == 2" class="diy-wrap">
				<div class="box-wrap">
					<div class="left">
						<img class="qrcode" :src="qrcode" alt="">
					</div>
					<div class="right">
						<p class="diy-content">{{input_text}}</p>
						<p v-show="username" class="diy-name">—— {{username}}</p>
					</div>
				</div>
			</div>
			<!-- <div :class="navActive == 2 ? 'blessing-text-box add-bgurl':'blessing-text-box'">
				<div v-show="navActive == 2" class="textarea-input">
					{{input_text}}
				</div>
				<div v-show="username" class="username"> 
					<span v-if="navActive == 2"> —— </span>
					{{username}} 
				</div>
				<van-image 
					v-show="navActive == 1 && blessing_text" 
					class="blessing-text" 
					width="100%"
					:src="blessing_text" 
					fit="scale-down">
				</van-image>
			</div> -->
			<!-- <van-image class="logo" :src="logo"></van-image> -->
		</div>
		<div class="popup" v-if="show_box">
			<div class="popup-tab">
				<van-button 
					:class="navActive == item.id ? 'popup-tab-button active': 'popup-tab-button' "
					size="small"
					v-for="item in tabList" 
					:key="item.id" 
					@click="toggleNav(item.id)">
					{{item.name}}
				</van-button>
				<van-image class="preview" width="50" @click="showInputBox(false)" :src="preview_img" fit="scale-down"></van-image>
			</div>
			<div class="popup-content">
				<div v-if="navActive == 1" class="popup-content-default" >
					<div 
						class="popup-content-default-item"
						v-for="item in textList"
						:key="item.id" 
						@click="setBlessing(item.id)">
						<img width="140" height="20" :src="item.img"/>
						<img v-if="currentTextIndex == item.id" width="15" :src="active_img"/>
					</div>
				</div>
				<van-field
				  v-if="navActive == 2"
			      class="input-text"
				  v-model="input_text"
				  rows="2"
				  autosize
				  type="textarea"
				  maxlength="30"
				  placeholder="请输入留言"
				  show-word-limit
				  @focus="onFocusEvent" 
				  @blur="onBlurEvent"
				/>
				<div class="username">
					<span class="input-username-desc">你的名字</span>
					<van-field class="input-username" maxlength="5" @focus="onFocusEvent" @blur="onBlurEvent" v-model="username" />
				</div>
			</div>
		</div>
		<div v-else class="show-preview" @click="showInputBox(true)">
			<van-image width="80" :src="show_preview" fit="scale-down"></van-image>
		</div>
		<div class="next-button" v-if="show_next_button" @click="checkNameAndText">
			<van-image width="110" height="30" :src="next_button" fit="scale-down"></van-image>
		</div>
		<!-- <div v-if="downloadUrl" class="canvasImg">
			<img :src="downloadUrl" />
		</div> -->
		<div class="wait" v-if="show_wait">
			<img class="wait-mouse" src="http://h5static.weiyoho.com/assets/theme/mouse.png" />
			<div class="tip">客官稍等，马上就好</div>
			<!-- <img class="wait-text" src="http://h5static.weiyoho.com/assets/share/text.png" /> -->
		</div>
	</div>
</template>

<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
<script>
import { mapState } from "vuex";
import { Image, Toast,Button,Field } from "vant";
import html2canvas from "html2canvas"
export default {
	name: "blessing",
	components: {
		[Image.name]: Image,
		[Toast.name]: Toast,
		[Button.name]: Button,
		[Field.name]: Field,
	},
    data() {
      return {
		platform: 'ios',
		navActive: 1,
		downloadUrl: '',
		show_box: true,
		show_wait:false,
		is_select: false,
		show_guide: true,
		guide_img: 'http://h5static.weiyoho.com/assets/guide-2.png',
		qrcode: require('../assets/picture/qrcode.png'),
		currentTextIndex: 1,
		username: '',
		blessing_text: '',
		input_text: '',
		show_next_button: true,
		next_button: 'http://h5static.weiyoho.com/assets/picture/finish.png',
		text_box: 'http://h5static.weiyoho.com/assets/picture/text-box.png',
		logo: 'http://h5static.weiyoho.com/assets/picture/logo.png',
		preview_img: 'http://h5static.weiyoho.com/assets/picture/preview.png',
		show_preview: 'http://h5static.weiyoho.com/assets/picture/show-preview.png',
		active_img: 'http://h5static.weiyoho.com/assets/picture/active.png',
		tabList:[
			{
				id: 1,
				name: '一键祝福'
			},
			{
				id: 2,
				name: '文案DIY'
			}
		],
		textList: [
			{
				id: 1,
				img: 'http://h5static.weiyoho.com/assets/picture/hua-default-text1.png'
			},
			{
				id: 2,
				img: 'http://h5static.weiyoho.com/assets/picture/hua-default-text2.png'
			},
			{
				id: 3,
				img: 'http://h5static.weiyoho.com/assets/picture/hua-default-text3.png'
			},
			{
				id: 4,
				img: 'http://h5static.weiyoho.com/assets/picture/hua-default-text4.png'
			},
			{
				id: 5,
				img: 'http://h5static.weiyoho.com/assets/picture/hua-default-text5.png'
			},
			{
				id: 6,
				img: 'http://h5static.weiyoho.com/assets/picture/hua-default-text6.png'
			}
		],
		pictureDefaultText:[
			{
				id: 1,
				img: require('../assets/picture/hua-text1.png'),
			},
			{
				id: 2,
				img: require('../assets/picture/hua-text2.png'),
			},
			{
				id: 3,
				img: require('../assets/picture/hua-text3.png'),
			},
			{
				id: 4,
				img: require('../assets/picture/hua-text4.png'),
			},
			{
				id: 5,
				img: require('../assets/picture/hua-text5.png'),
			},
			{
				id: 6,
				img: require('../assets/picture/hua-text6.png'),
			}
		],
      };
	},
	computed: {
		...mapState({
			downloadImg: state => state.downloadImg,
			madeTextCount: state => state.madeTextCount,
		})
	},
	mounted() {
		this.blessing_text = this.pictureDefaultText[0].img;
		localStorage.getItem("BLESSING") ? this.show_guide = false : localStorage.setItem("BLESSING", 1);
	},
    methods: {
		onDownloadPic() {
			this.show_wait = true
			html2canvas(document.querySelector("#download"), {
				useCORS: true,
				backgroundColor: null
				// scale: 5,
			}).then(canvas => {
				this.downloadUrl = canvas.toDataURL("image/jpeg");
				// localStorage.setItem("CANVAS_IMAGE", this.downloadUrl);
				this.$store.commit("updateDownloadImg", this.downloadUrl);
				this.uploadImg(this.downloadUrl)
			});
		},
		uploadImg(imgurl){
			// let response = 'http://h5static.weiyoho.com/uploads/02350279fdde2da17f24f8f0e1ba7261.jpeg'
			// let url = '/share?id=1&downloadImg=' + response
			// this.$router.push(url)
			this.$http({
				method:'post',
				url:'http://h5shu.weiyoho.com',
				data:{    //这里是发送给后台的数据
					  img: imgurl
				}
			}).then((response) =>{          //这里使用了ES6的语法
				console.log('response',response) 
				let url = '/share?id=1&downloadImg=' + response.data.url
				this.$store.commit("updateShowWaiting", false)
				this.$router.replace(url)
			})
		},
		onBlurEvent(){
			setTimeout(function () {
				let scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
				window.scrollTo(0, Math.max(scrollHeight - 1, 0));
			}, 100);
			this.show_next_button = true
		},
		onFocusEvent(){
			this.show_next_button = false
		},
		toggleNav(index){
			this.navActive = index
			this.is_active = true
		},
		setBlessing(index){
			this.currentTextIndex = index
			this.blessing_text = this.pictureDefaultText[--index].img;
		},
		showInputBox(flag){
			this.show_box = flag;
		},
		checkNameAndText(){
			if(this.navActive == 2 && !this.input_text){
				Toast('请选择文案或输入你的祝福');
				return
			}
			if(!this.username){
				Toast('请输入你的名字');
				return
			}
			this.onDownloadPic();
		},
		hideGuide(){
			this.show_guide = false
		},
		/**
		 * @desc 跳转页面
		 */
		// pageTo(url){
		// 	this.$router.push({ name: '/share?id=1', params: { downloadImg: this.downloadUrl }});
		// 	// this.$router.push(url)
		// }
	},
	created() {
		console.log('this.madeTextCount',this.madeTextCount)
		if(this.madeTextCount > 0){
			this.show_guide = false
			this.$store.commit("updateMadeTextCount", ++this.madeTextCount);
		}
		// Toast.loading({
		//   duration: 1000,
		//   message: '加载中...',
		//   forbidClick: true
		// });
		// const that = this
		// setTimeout(function(){
		// 	that.downloadUrl = that.downloadImg
		// },1000)
	}
}
</script>

<style lang="less" scoped="scoped">
	.blessing-content{
		position: relative;
		width: 100vw;
		height: 100vh;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		.guide-mask{
			width: 100vw;
			height: 100vh;
			position: absolute;
			background-color: #000000;
			opacity: 0.7;
			top: 0;
			left: 0;
			z-index: 999;
		}
		.guide-img{
			position: absolute;
			top: 10vh;
			left: 10%;
			width: 200px;
			z-index: 999;
		}
		.popup{
			position: absolute;
			width: 90%;
			top: 20vh;
			left: 5%;
			&-tab{
				position: position;
				width: 100%;
				left: 0;
				bottom: 0;
				display: flex;
				&-button{
					width: 70px !important;
					border: 0;
					// border-radius: 5px 5px 0 0;
					padding: 0 !important;
					font-weight: 500;
				}
			}
			&-content{
				background: url(../assets/calendar/box.png) no-repeat;
				background-size: 100% 100%;
				position: relative;
				width: 100%;
				padding: 15px;
				box-sizing: border-box;
				&-default{
					background-color: #ffffff;
					border: 2px solid #000000;
					text-align: left;
					border-radius: 10px;
					// max-height: 25vh;
					overflow: scroll;
					&-item{
						line-height: 28px;
						display: flex;
						justify-content: space-around;
						margin: 10px 0;
					}
				}
			}
			.username{
				margin-top: 10px;
				display: flex;
				justify-content: center;
				.input-username{
					border: 2px solid #000;
					margin-left: 10px;
					border-radius: 5px;
					width: 100px;
					padding: 0 5px;
				}
			}
			.input-text{
				border: 2px solid #000000;
				border-radius: 5px;
			}
		}
		.next-button{
			position: relative;
			top: 93vh;
			z-index: 3;
		}
		.active{
			background-color: #ffd373;
			color: #b62431;
		}
		.preview{
			position: absolute;
			right: 0;
			top: 0;
		}
		.show-preview{
			position: absolute;
			right: 10px;
			bottom: 10px;
			z-index: 999;
		}
	
	.blessing{
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		.logo{
			position: absolute;
			width: 100px;
			bottom: 1vh;
			left: 35%;
			z-index: 1;
		}
		&-box{
			position: absolute;
			min-height: 30%;
			width: 70%;
			top: 25%;
			left: 10%;
			padding: 20px;
			background-color: #ffffff;
			.input-username-desc{
				border: 1px solid #000000;
				padding: 1px;
			}
			.input-username{
				border: 1px solid #000000;
				width: 100px;
				margin-left: 20px;
			}
			.input-text{
				border: 1px solid #000000;
			}
		}
		&-text-box{
			position: absolute;
			left: 10%;
			bottom: 6vh;
			width: 80%;
			min-height: 13%;
			font-size: 14px;
			box-sizing: border-box;
			.username{
				// position: relative;
				// top: -11vh;
				position: absolute;
				top: 8px;
				width: 100%;
				left: -35px;
				text-align: center !important;
				font-size: 16px;
				color: #000;
				// font-weight: 500;
				.name {
					// text-decoration: underline;
					color:#c73f2c;
					padding: 0 3px;
				}
			}
			.textarea-input{
				max-width: 54vw;
				transform: translateX(10px);
				padding-top: 10px;
			}
		}
		.add-bgurl{
			background: url(../assets/picture/text-box.png) no-repeat;
			// background-size: 100% 78px;
			background-size: 100% 100%;
			width: 80% !important;
			bottom: 7vh;
			left: 10%;
			box-sizing: border-box;
			.username{
				position: relative;
				top: 0px;
				color: indianred;
			}
		}

		.diy-wrap {
			position: absolute;
			bottom: 7vh;
			display: flex;
			justify-content: center;
			width: 100%;
			min-height: 78px;
			box-sizing: border-box;
			// border: 1px solid red;

			.box-wrap {
				display: flex;
				flex-direction: row-reverse;
				align-items: flex-start;
				width: 80%;
				min-height: 78px;
				border: 2px solid black;
				background: #fff9ed;
				padding: 10px;
				border-radius: 10px;
				box-sizing: border-box;
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
				p {
					margin: 0;
				}
				.left {
					// width: 49px;
					// height: 78px;
					.qrcode {
						width: 55px;
						height: 55px;
					}
				}
				.right {
					display: flex;
					flex: 1;
					flex-direction: column;
					justify-content: space-between;
					padding: 0 5px;
					min-height: 55px;
					box-sizing: border-box;

					.diy-content {
						font-size: 14px;
						color:#2c3e50;
					}
					.diy-name {
						display: flex;
						justify-content: flex-end;
						padding-right: 5px;
						font-size: 16px;
						color: #cd5c5c;
					}
				}
			}
		}
	}
	.canvasImg{
		position: absolute;
		left: 0;
		top: 0;
		z-index: 9999;
		img{
			width: 100vw;
			height: 100vh;
		}
	}

	.wait{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100vw;
		height: 100vh;
		background: url(../assets/theme/bg.png) no-repeat;
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		z-index: 999;
		&-mouse{
			position: absolute;
			top: 150px;
			width: 100px;
			-webkit-animation: mouse-down-up-ani 2s ease-in-out infinite;
		}
		.tip {
			position: absolute;
			top: 300px;
			font-size: 22px;
      		color: #fff;
		}
		&-text{
			position: absolute;
			top: 300px;
			width: 200px;
		}
	}
}
</style>
